<template>
  <div class="app-container login-container">
    <header class="header">
      <img src="@/assets/logo2.png" alt="Logo" class="header-logo"/>
    </header>

    <!-- 顶部消息提示 -->
    <MessageAlert v-if="showSuccessAlert" theme="success" :message="loginMessage" />
    <MessageAlert v-if="showErrorAlert" theme="error" :message="loginMessage" />

    <div class="center">
      <div class="logon">
        <div :class="overlaylong">
          <div class="overlaylong-Signin" v-if="disfiex === 0">
            <h2 class="overlaylongH2">登录</h2>
            <input v-model="username" type="text" placeholder="用户名"/>
            <input v-model="password" type="password" placeholder="密码"/>
            <h3 @click="forgotPassword">忘记密码</h3>
            <button @click="login" class="inupbutton">登录</button>
          </div>
          <div class="overlaylong-Signup" v-if="disfiex === 1">
            <h2 class="overlaylongH2">注册账号</h2>
            <input v-model="username" type="text" placeholder="用户名"/>
            <input v-model="password" type="password" placeholder="密码"/>
            <input v-model="fullName" type="text" placeholder="姓名"/> <!-- 新增姓名输入框 -->
            <button @click="register" class="inupbutton">注册</button>
          </div>
        </div>
        <div :class="overlaytitle">
          <div class="overlaytitle-Signin" v-if="disfiex === 0">
            <h2 class="overlaytitleH2">桂林理工大学报修管理系统</h2>
            <p class="overlaytitleP">还没有账号？点击注册</p>
            <div class="buttongohs" @click="Signin">注册</div>
          </div>
          <div class="overlaytitle-Signup" v-if="disfiex === 1">
            <h2 class="overlaytitleH2">欢迎回来</h2>
            <p class="overlaytitleP">已有账号？点击登录</p>
            <div class="buttongohs" @click="Signup">登录</div>
          </div>
        </div>
      </div>
    </div>

    <footer class="footer">
      <div class="footer-content">
        <p class="footer-text">© 2024 大学报修管理系统</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import MessageAlert from '../src/MessageAlert.vue';

const overlaylong = ref('overlaylong');
const overlaytitle = ref('overlaytitle');
const disfiex = ref(0);
const username = ref('');
const password = ref('');
const fullName = ref('');
const loginMessage = ref('');
const showInfoAlert = ref(false);
const showSuccessAlert = ref(false);
const showWarningAlert = ref(false);
const showErrorAlert = ref(false);

const router = useRouter();

const Signin = () => {
  overlaylong.value = "overlaylongleft";
  overlaytitle.value = "overlaytitleright";
  setTimeout(() => {
    disfiex.value = 1;
  }, 200);
};

const Signup = () => {
  overlaylong.value = "overlaylongright";
  overlaytitle.value = "overlaytitleleft";
  setTimeout(() => {
    disfiex.value = 0;
  }, 200);
};

const validateInputs = () => {
  if (!username.value || !password.value || (disfiex.value === 1 && !fullName.value)) {
    loginMessage.value = '请填写所有必填字段。';
    showErrorAlert.value = true;
    setTimeout(() => { showErrorAlert.value = false; }, 3000);
    return false;
  }
  return true;
};

const login = async () => {
  if (!validateInputs()) return;

  try {
    const response = await axios.post('http://localhost:8080/admin-users/login', {
      username: username.value,
      password: password.value
    });
    loginMessage.value = response.data.message;
    if (response.data.message === '登录成功') {

      localStorage.setItem('adminUsername', username.value); // 存储用户名到localStorage

      showSuccessAlert.value = true;
      setTimeout(() => router.push('/admin'), 2000);
    } else {
      showErrorAlert.value = true;
    }
    setTimeout(() => {
      showErrorAlert.value = false;
      showSuccessAlert.value = false;
    }, 3000);
  } catch (error) {
    loginMessage.value = '登录失败，请检查用户名和密码。';
    showErrorAlert.value = true;
    setTimeout(() => {
      showErrorAlert.value = false;
    }, 3000);
  }
};

const register = async () => {
  if (!validateInputs()) return;

  try {
    const response = await axios.post('http://localhost:8080/admin-users/register', {
      username: username.value,
      password: password.value,
      fullName: fullName.value
    });
    loginMessage.value = response.data.message;
    if (response.data.message === '注册成功') {
      showSuccessAlert.value = true;
      setTimeout(() => Signin(), 2000);
    } else {
      showErrorAlert.value = true;
    }
    setTimeout(() => {
      showErrorAlert.value = false;
      showSuccessAlert.value = false;
    }, 3000);
  } catch (error) {
    loginMessage.value = '注册失败，请检查用户名和密码。';
    showErrorAlert.value = true;
    setTimeout(() => {
      showErrorAlert.value = false;
    }, 3000);
  }
};

const forgotPassword = () => {
  router.push('/forget');
};
</script>

<style scoped>
.login-container {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 避免页面出现滚动条 */
  background: url('@/assets/bg-1.jpg') no-repeat center center fixed; /* 添加背景图片 */
  background-size: cover; /* 确保背景图片覆盖整个容器 */
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: #013989;
  color: white;
  display: flex;
  align-items: center;
  padding: 30px 60px; /* 调整顶部导航栏的内边距 */
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000; /* 确保在最上层 */
}

.header-logo {
  height: 80px; /* 调整 Logo 图片的高度 */
  margin-right: 30px; /* 增大 Logo 和标题之间的间距 */
}

.header-title {
  font-size: 32px; /* 增大标题字体 */
  margin: 0;
}

.center {
  flex: 1; /* 占满剩余空间 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  flex-direction: column;
  margin-top: 100px; /* 留出顶部导航栏的空间 */
  margin-bottom: 80px; /* 留出底部导航栏的空间 */
}

h1 {
  font-size: 30px;
  color: black;
}

.logon {
  background: linear-gradient(to right, #62a0f1, #013989); /* 标准语法 */
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 70vw; /* 确保宽度适应视口宽度 */
  max-width: 1000px; /* 最大宽度设置为1000px */
  height: 500px;
  display: flex;
  overflow: hidden; /* 避免内容溢出显示滚动条 */
}

.overlaylong {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff; /* 确保背景颜色为白色 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaylongleft {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform: translateX(100%);
  transition: transform 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaylongright {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform: translateX(0%);
  transition: transform 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaytitle {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaytitleH2 {
  font-size: 32px; /* 增大标题字体 */
  color: #fff;
  margin-top: 20px;
}

.overlaytitleP {
  font-size: 18px; /* 增大描述字体 */
  color: #fff;
  margin-top: 20px;
}

.overlaytitleleft {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0%);
  transition: transform 0.6s ease-in-out;
}

.overlaytitleright {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-100%);
  transition: transform 0.6s ease-in-out;
}

.overlaytitle-Signin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlaytitle-Signup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.buttongohs {
  width: 180px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  margin-top: 40px;
  cursor: pointer;
}

.overlaylongH2 {
  font-size: 25px;
  color: black;
}

.overlaylong-Signin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlaylong-Signup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

input {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: 240px;
  color: black !important; /* 设置输入文字颜色为黑色 */
}

h3 {
  font-size: 15px; /* 增大“忘记密码”字体 */
  margin-top: 10px;
  cursor: pointer;
  color: black; /* 设置“忘记密码”文本的颜色为黑色 */
}

.inupbutton {
  background-color: #62a0f1;
  border: none;
  width: 180px;
  height: 40px;
  border-radius: 50px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin-top: 30px;
}

/* 底部导航栏 */
.footer {
  background-color: #013989;
  color: white;
  text-align: center;
  padding: 30px 60px; /* 调整底部导航栏的内边距 */
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000; /* 确保在最上层 */
}

.footer-content {
  margin-top: 10px; /* 增大底部内容与底部边缘之间的间距 */
}

.footer-text {
  margin: 0;
}
</style>
